<template>
    <div class="video-list">
        <div class="header">
            <h1 class="title">正在上映</h1>
            <span class="from">豆瓣电影</span>
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="(item,i) in movies" :key="item.id">
                <img class="mui-media-object mui-pull-left" :src="item.images.medium">
                <div class="mui-media-body">
                    <span class="name">{{ item.original_title }}</span>
                    <p class="rating">
                        <strong>评分{{ item.rating.average }}</strong>
                        <span>{{ item.collect_count }}人评价</span>
                    </p>
                    <p v-cloak>类型:{{ item.genres}}</p>
                    <p class="time">上演时间:{{ item.year }}</p>
                    <a :href="item.alt" class="detail">具体信息参考豆瓣信息</a>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data() {
    return {
      movies: []
    };
  },
  created() {
    this.getVideoList();
  },
  methods: {
    getVideoList() {
      this.$http
        .jsonp(
          "https://api.douban.com/v2/movie/in_theaters",
          {},
          {
            headers: {},
            emulateJSON: true
          }
        )
        .then(res => {
          //   this.movies = response.subjects;
          //   console.log(this.movies);
          //   console.log(res.body.subjects)
          //   console.log(res.body.subjects[0].casts);
          //   console.log(res.body.subjects[0].casts[0].name)
          this.movies = res.body.subjects;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.video-list {
  padding: 0 4px;
  background-color: white;
  .header {
    text-align: center;
    margin: 10px auto;
    .title {
      font-size: 24px;
      font-weight: 500;
    }
  }
  .mui-table-view-cell {
        height: 120px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px #ccc;
        border-radius: 10px;
    .mui-media-object {
            max-width: 100%;
            height: 120px;
    }
    .mui-media-body {
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            color: red;
      .rating {
            display: flex;
            justify-content: space-between;
      }
      .detail {
            font-size: 12px;
            float: right;
      }
    }
  }
}
[v-cloak] {
  display: none;
}
</style>


